import React, { useEffect, useState } from "react";
import { getUserCityCount } from "@/api/chart";
import ReactECharts from "echarts-for-react";
import jsonp from "jsonp";

export default function ChartDetails() {
  const [cityArr, setCityArr] = useState([]);
  useEffect(() => {
    jsonp(`https://query.asilu.com/weather/baidu/?city=青岛`, {}, (e,d) => { 
    console.log(e,d);
    })
    getUserCityCount().then((res) => {
      console.log(res);
      setCityArr([
        Object.keys(res.data.user_city),
        Object.values(res.data.user_city),
      ]);
    });
  }, []);
  const options = {
    title: {
      text: "用户区域分布",
      },
      legend: {},
    grid: { containerLabel: true },
    xAxis: {
      type: "category",
      data: cityArr[0],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: cityArr[1],
        type: "bar",
        smooth: true,
      },
    ],
    tooltip: {
      trigger: "axis",
    },
    toolbox: {},
  };

  const option = {
    series: [
      {
        type: "gauge",
        center: ["50%", "60%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 60,
        splitNumber: 12,
        itemStyle: {
          color: "#FFAB91",
        },
        progress: {
          show: true,
          width: 30,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 30,
          },
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        splitLine: {
          distance: -52,
          length: 14,
          lineStyle: {
            width: 3,
            color: "#999",
          },
        },
        axisLabel: {
          distance: -20,
          color: "#999",
          fontSize: 20,
        },
        anchor: {
          show: false,
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          width: "60%",
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, "-15%"],
          fontSize: 60,
          fontWeight: "bolder",
          formatter: "{value} °C",
          color: "inherit",
        },
        data: [
          {
            value: 20,
          },
        ],
      },
      {
        type: "gauge",
        center: ["50%", "60%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 60,
        itemStyle: {
          color: "#FD7347",
        },
        progress: {
          show: true,
          width: 8,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 20,
          },
        ],
      },
    ],
  };

  return (
    <div>
      <ReactECharts
        style={{ width: "500px" }}
        option={options}
        opts={{ renderer: "svg" }}
      />

      <ReactECharts
        style={{ width: "500px" }}
        option={option}
        opts={{ renderer: "svg" }}
      />
    </div>
  );
}
